<template>
	<div id="login">
		<div class="row">
			<div class="col-md-12 position-relative">
				<div class="position-absolute" style="top: 1.5rem;left: 15px;">
					<h3><img data-id="767b" data-aid="26" style="height: 46px; width: 46px;" src="http://pic.sfont.cn/font/26/767b.svg">
					<img data-id="9646" data-aid="26" style="height: 46px; width: 46px;" src="http://pic.sfont.cn/font/26/9646.svg"></h3>
				</div>
				<img class="mx-auto my-3 d-block" src="../assets/logo.png" alt="">
			</div>
			<div class="col-md-12">
				<form @submit.prevent='onSubmit'>
					<div class="form-group">
						<label for="">用户名/邮箱：
							<small class="text-danger" 
							v-remind="email">
							</small>
						</label>
						<input type="text" class="form-control" v-model='email' v-verify="email" placeholder="请使用邮箱地址登陆">
					</div>
					<div class="form-group">
						<label for="">密码：
							<small class="text-danger" 
							v-remind="password">
							</small>
						</label>
						<input type="password" class="form-control" v-model='password' v-verify="password" placeholder="请输入密码">
					</div>
					<div class="form-group mt-4">
						<button type="submit" class="btn btn-success btn-block">{{loginTip}}</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
export default{
	name:'login',
	data(){
		return {
			email:'',
			password:'',
			loginTip:'登录',
		}
	},
	verify:{
		email:['required','email'],
		password:['required',{minLength:6,message:'密码不得小于6位'}]
	},
	methods:{
		loginVerify(){
			// let data = {"username":this.email.trim(),"password":this.password.trim()};
			return new Promise((resolve,reject)=>{
				this.$http.get(`https://d.apicloud.com/mcm/api/pizzaApp/count?filter={"where":{"username":"${this.email.trim()}","password":"${this.password.trim()}"}}`)
				.then((res) =>{
	         		console.log(res.data); 
	         		if (res.data.count) {
	         			resolve('ok');
	         		}else{
	         			resolve('no');
	         		}
	         	})
			})
		},
		onSubmit(){
			if (this.$verify.check()) {
				this.loginVerify().then(res=>{
					if (res === 'ok') {
						this.loginTip = '登录成功,正在跳转...';
						// 将用户名储存到localStorage中
						let storage = window.localStorage;
						storage['_userName'] = this.email;
						let getstor = storage['_userName'];
						this.$store.commit('checkLogin',getstor);
						this.$router.push({name:'homeLink'});
					}else{
						this.loginTip = '您输入的账号与密码不匹配';
						setTimeout(()=>{
							this.loginTip = '登录';
						},1500)
					}
				})
			}
			
		}
	}
	// beforeRouteEnter(to,from,next){
	// 	next((vm) => {console.log(vm.name)})
	// },
	// beforeRouteLeave(to,from,next){
	// 	// if (confirm("确定要离开当前页面吗？") == true) {
	// 	// 	next();
	// 	// }else{
	// 	// 	next(false);
	// 	// }
	// },
	// beforeRouteUpdate(to,from,next){

	// }
};

	
</script>

<style type="text/css" lang="scss">
    input.danger{
    	boder:1px solid green;
    }
	input.form-control:focus{
		box-shadow: 0 0 0 0;
	}
</style>

<!--  全局守卫   parmas参数（to,from,next）
   beforeEach(){} -> 前置守卫
   afterEach(){}  -> 后置守卫

     路由独享守卫 （与全局守卫用法基本相同）
        只是定义在路由参数中
        beforeEnter()...

     组件内守卫
   beforeRouteEnter()  // 在渲染该组件的对应路由被 confirm 前调用
                            // 不！能！获取组件实例 `this`,通过next()获取
   beforeRouteLeave()
   beforeRouteUpdate() -->
	